@keyframes vfm-appear {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.vfm {
  &__container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--p-1);
  }

  &__content {
    background: var(--background-base);
    border-radius: var(--border-radius);
    max-width: var(--max-width-tablet);
    animation: vfm-appear var(--transition-duration);
    border: 1px solid var(--background-highlight);
  }

  .form {
    background: transparent;
  }
}

.modal {
  &__content, &__footer {
    padding: var(--p-3);
  }

  &__content {
    background: var(--background-elevated-base);
    outline: 1px solid var(--background-elevated-highlight);
    border-radius: var(--border-radius) var(--border-radius);
  }

  &__footer {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    border: 1px solid rgb(var(--accent-tint-4));
    border-top: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    border-top: 1px solid rgb(var(--accent-tint-4));

    .button:not(:last-child) {
      margin-right: var(--m-1);
    }
  }
}

@keyframes vfm-appear {
  0% {
    filter: blur(var(--blur-size));
    transform: scale(1.5);
    opacity: 0;
  }

  100% {
    filter: blur(0px);
    transform: none;
    opacity: 1;
  }
}